<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: yangzg
 * @Date: 2022-08-16 16:28:32
 * @LastEditors: wangmiao
 * @LastEditTime: 2022-08-23 14:52:58
-->
<template>
  <div class="container">
    <el-dialog v-model="isShow" width="30%" center>
      <div class="content">
        <h1 class="title">问题类型</h1>
        <el-input
          v-model="form.problemType"
          maxlength="20"
          placeholder="请输入问题类型"
          show-word-limit
          type="text"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="saveOrCancel(dialogClickType.determine)"
            type="primary"
            >确定</el-button
          >
          <el-button @click="saveOrCancel(dialogClickType.cancel)"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { guid } from "@/utils/index.ts";
import { dialogClickType, setBtnType } from "@/constants/const.ts";
import { formType, temInfoType } from "@/models/add_problem_type.ts";
import { problemInfo } from "@/models/home.ts";

interface Props {
  detailedInfo: problemInfo;
  componentType: string;
  isEdit?: true;
  itemInfo?: temInfoType;
}

const { problemTypeList, componentType, isEdit, itemInfo } =
  defineProps<Props>();
const form = reactive<formType>({
  problemType: isEdit ? itemInfo?.problemType || "" : "",
  id: "",
});

const emit = defineEmits(["getChildValue"]);

const isShow = ref<boolean>(true);

const saveOrCancel = (type) => {
  if (type === dialogClickType.determine) {
    if (!isEdit) {
      emit("getChildValue", {
        type: setBtnType.problemsType,
        btnType: dialogClickType.determine,
        formValue: {
          problemType: form.problemType,
          id: guid(),
        },
      });
    } else {
      emit("getChildValue", {
        type: setBtnType.problemsEdit,
        btnType: dialogClickType.determine,
        formValue: {
          ...itemInfo,
          problemType: form.problemType,
        },
      });
    }
  } else {
    emit("getChildValue", {
      type: setBtnType.problemsType,
      btnType: dialogClickType.cancel,
      formValue: form,
    });
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
